@charset'UTF-8';

/**
 * 春节
 * @Author zhangzongzheng
 * @email zhangzongzheng@ymatou.com
 * @Date 2016/01/04
 */

@import'../_components/variables.scss';
@import'../_components/_mixin.scss';
@import'../_components/reset.scss';
@import'../_components/column.scss';
@import'../assets/ymtUI.scss';
@import'../assets/ymt_components.scss';
@import'../assets/common.scss';
@import'../black_five/_proList.scss';
@import'../assets/_global_good.scss';
// $imgPath:'/images/spring_festival/';
$imgPath:'http://staticontent.ymatou.com/images/activity/spring_festival/';
$rem: 1rem/32;
.ios-bartools {
    height: $rem*150;
    &-wrapper {
        background: rgba(255, 255, 255, 1);
        height: $rem*150;
        z-index: 9999;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        border-bottom: $rem*2 solid rgba(0, 0, 0, .5);
        padding-top: $rem*70;
        h2 {
            font-size: $rem*38;
            text-align: center;
            color: #333;
            font-weight: bold;
        }
    }
}

.banner {
    height: $rem*516;
    background-image: url(#{$imgPath}nc_banner.jpg);
    @extend .bg__full;
}

.single-dog-wrap {
    height: $rem*186;
    padding-top: $rem*10;
    background-color: #f53a00;
    .single-dog {
        width: $rem*710;
        height: $rem*187;
        margin: 0 auto;
        background-image: url(#{$imgPath}sub_banner.png);
        @extend .bg__full;
    }
}

//砍价团
.bf-group {
    background-color: #f53a00;
    position: relative;
    width: 100%;
    padding: $rem*10 0 $rem*20;
    overflow: hidden;
    box-sizing: border-box;
    &-list {
        white-space: nowrap;
        font-size: 0;
    }
    &-item {
        display: inline-block;
        height: $rem*437;
        padding: $rem*30 $rem*54 $rem*70;
        position: relative;
        .item-info {
            display: inline-block;
        }
        .country {
            .flag {
                width: $rem*26;
                height: $rem*26;
                margin-right: $rem*10;
            }
            .name {
                font-size: $rem*18;
                color: #9b9b9b;
            }
        }
        .pro-name {
            width: $rem*272;
            font-size: $rem*30;
            color: #000;
            padding: $rem*18 0;
            border-bottom: 1px solid #f53a00;
            @include textOverFlow(2);
        }
        .group-price {
            position: relative;
            margin: $rem*25 0 $rem*14;
            .circle {
                display: inline-block;
                text-align: center;
                width: $rem*54;
                height: $rem*54;
                line-height: $rem*54;
                border: 1px solid #cc3333;
                border-radius: 50%;
                margin-left: -$rem*10;
                &:first-child {
                    margin-left: 0;
                }
                .text {
                    display: inline-block;
                    line-height: 1;
                    font-size: $rem*30;
                    transform: translateY(25%);
                    position: relative;

                }
                &:nth-child(-n+4) {
                    .text {
                        &:after {
                            content: '';
                            display: block;
                            width: $rem*16;
                            height: $rem*30;
                            background-color: #fff;
                            position: absolute;
                            right: -$rem*16;
                            top: 0;
                        }
                    }
                }
            }
        }
        .price {
            .sale-price {
               font-size: $rem*40;
               color: #f53a00;
               strong {
                   font-size: $rem*60;
               }
            }
            .market-price-wrap {
                display: inline-block;
                .market-price {
                    font-size: $rem*22;
                    color: #888585;
                }
                .join {
                    font-size: $rem*24;
                    color: #fff;
                    background-color: #f04528;
                    text-align: center;
                    border-radius: $rem*10;
                }
            }
        }
        .item-pic {
            height: $rem*320;
            width: $rem*300;
            position: absolute;
            top: $rem*30;
            right: $rem*54;
            @extend .bg__full;
        }
    }
    .bf-area-hd {
        background-image:url(#{$imgPath}nc_kjt_head.png);
        width: 100%;
        height: $rem*135;
        @extend .bg__full;
    }
    &-pro {
        width: 100%;
        height: $rem*416;
        position: relative;
    }
    &-count {
        font-size: $rem*24;
        color: #fff;
        padding: $rem*4 $rem*22;
        background: #c33;
        position: absolute;
        left: $rem*40;
        bottom: $rem*25;
        border-radius: $rem*50;
    }
    //砍价团分页
    &-pagination {
        position: absolute;
        bottom: $rem*40;
        left: 0;
        text-align: center;
        width: 100%;
        .swiper-pagination-bullet {
            width: $rem*15;
            height: $rem*15;
            border-radius: 50%;
            background: #ffa8a3;
            margin-right: $rem*15;
            display: inline-block;
        }
        .swiper-pagination-bullet-active {
            background: #ff5247;
        }
    }
    .bf-area-bd {
        margin: 0 $rem*10;
        background: #fff;
        height: $rem*416;
        overflow: hidden;
    }
}

//秒杀
.bf-seckill {
    font-size: 0;
    &-wrapper {
        background-color: #f53a00;
        padding-bottom: $rem*40;
        .bf-area-hd {
            background-image:url(#{$imgPath}/nc_ms_head.png);
            height: $rem*125;
            span {
                position: absolute;
                bottom: $rem*12;
                right: $rem*15;
            }
            i {
                background-color: #fff;
                border-radius: 50%;
                display: inline-block;
                width: $rem*20;
                height: $rem*20;
                line-height: $rem*20;
                text-align: center;
                margin-left: $rem*3;
                color: #cf2541;
                font-size: $rem*25;
            }
        }
        .bf-area-bd {
            height: $rem*390;
            overflow: hidden;
            position: relative;
        }
        .before-mask {
            position: absolute;
            height: 100%;
            width: 100%;
            z-index: 2;
            top: 0;
            left: 0;
            color: #fff;
            padding-top: $rem*130;
            font-size: $rem*40;
            text-align: center;
            background: rgba(0, 0, 0, .5);
            display: none;
        }
        &.before {
            .before-mask {
                display: block;
            }
        }
    }
    &-list {
        height: 100%;
        white-space: nowrap;
        width: 100%;
    }
    &-item {
        display: inline-block;
        height: 100%;
        background-color: #fff;
        padding: $rem*45 $rem*45 0 $rem*45;
        @include clearfix();
        .item-pic {
            width: $rem*250;
            height: $rem*250;
            float: left;
            @extend .bg__full;
        }
        .item-info {
            width: 100%;
            padding-left: $rem*270;
            .item-name {
                font-size: $rem*25;
                font-weight: bold;
                color: #333333;
                min-height: $rem*80;
                margin-bottom: $rem*12;
                @include textOverFlow();
            }
            .country-flag {
                width: $rem*30;
                height: $rem*30;
                margin-right: $rem*8;
                background-color: red;
                border-radius: 50%;
                // vertical-align: middle;
            }
            .country-name {
                font-size: $rem*20;
                color: #b0b0b0;
            }
            .item-price {
                color: #f04528;
                font-size: $rem*34;
                strong {
                    font-size: $rem*50;
                    font-weight: 900;
                }
            }
            .stock {
                font-size: $rem*24;
                color: #ff5247;
                padding: $rem*2 $rem*12;
                border: 2px dashed #f04528;
                border-radius: $rem*10;
                margin-right: $rem*10;
            }
            .buy {
                font-size: $rem*24;
                color: #fff;
                padding: $rem*4 $rem*12;
                border-radius: $rem*10;
                background-color: #f53a00;
            }
        }
    }
    &-pro {
        height: 100%;
    }
    //秒杀分页
    &-pagination {
        position: absolute;
        bottom: $rem*40;
        left: 0;
        text-align: center;
        width: 100%;
        .swiper-pagination-bullet {
            width: $rem*16;
            height: $rem*16;
            border-radius: 50%;
            background-color: #a0a0a0;
            margin-right: $rem*15;
            display: inline-block;
        }
        .swiper-pagination-bullet-active {
            background-color: #f04528;
        }
    }
}

// 店铺
@for $i from 1 through 3 {
    .seller-list-title0#{$i} {
        background-image: url(#{$imgPath}nc_shop_title#{$i}.jpg);
    }
}

.seller-list-wrap {
    padding-bottom: $rem*20;
    background-color: #f53a00;
    .seller-list-hd {
        height: $rem*90;
        @extend .bg__full;
        background-size: cover;
        color: #fdf9bd;
        font-size: $rem*50;
        font-weight: 700;
        text-align: center;
    }
    .seller-list-bd {
        background-color: #d6d6d6;
    }
    .seller-item {
        margin-bottom: $rem*16;
        background-color: #fff;
        &:last-child {
            margin-bottom: 0;
        }
    }
    .seller-info-wrap {
        padding: $rem*16 $rem*26;
        border-bottom: 1px solid #e0e0e0;
        position: relative;
        .seller-avatar {
            width: $rem*84;
            height: $rem*84;
            border-radius: 50%;
            margin-right: $rem*5;
        }
        .seller-info {
            display: inline-block;
        }
        .seller-name {
            font-size: $rem*30;
            color: #191919;
        }
        .seller-other {
            line-height: 1;
        }
        .country-flag {
            width: $rem*32;
            height: $rem*32;
            border-radius: 50%;
            vertical-align: middle;
        }
        .country-name {
            font-size: $rem*24;
        }
        .fans {
            font-size: $rem*24;
            padding-left: $rem*12;
            border-left: 1px solid #cdcdcd;
        }
        .follow-btn {
            position: absolute;
            padding: $rem*8 $rem*10 $rem*8 $rem*60;
            right: $rem*26;
            bottom: $rem*16;
            background-color: #f53a00;
            background-image: url(#{$imgPath}nc_btn_bg.png);
            background-size: 50%;
            background-repeat: no-repeat;
            background-position: -$rem*25 -$rem*6;
            color: #fff;
            border-radius: $rem*8;
            border-left: 1px solid #f53a00;
            font-size: $rem*26;
        }
    }
    .seller-intro {
        padding: 0 $rem*30;
        margin: $rem*30 0 $rem*20;
        font-size: $rem*26;
        color: #2b2b2b;
        @include textOverFlow(2);
    }
    .seller-goods-list {
        margin: 0 $rem*12;
        padding-bottom: $rem*24;
        @include clearfix();
        .goods-item-wrap {
            width: 33.3%;
            float: left;
            &:first-child {
                padding-right: $rem*8;
            }
            &:last-child {
                padding-left: $rem*8
            }
            &:nth-child(2) {
                padding: 0 $rem*4;
            }
        }
        .goods-item {
            height: $rem*235;
            border: 1px solid #e9c3b8;
            position: relative;
            @extend .bg__full;
            .price {
                width: 100%;
                height: $rem*46;
                line-height: $rem*46;
                text-align: center;
                font-size: $rem*24;
                position: absolute;
                bottom: 0;
                color: #fff;
                background-color: rgba(0, 0, 0, 0.6);
                em {
                    font-size: $rem*30;
                }
            }
        }
    }
}

//春节红包雨
.packet-mask {
    display: none;
    width: 100%;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    &.show {
        display: block;
    }
}

.packet-wrap {
    width: $rem*495;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    .packet-cover {
        width: 100%;
        height: $rem*150;
        border-top-left-radius: 8rem 5rem;
        border-top-right-radius: 8rem 5rem;
        background-color: #ff4343;
        transform-origin: 50% 100%;
        // transform: rotateX(90deg);
        animation: openPacket 1.2s ease 1 forwards;
    }
    .packet-bd {
        width: 100%;
        // position: relative;
        padding: $rem*95 $rem*20 0;
        background-color: #da3434;
        box-shadow: 0 -1px 1px 1px rgba(0, 0, 0, 0.5);
        .title {
            color: #f8f4a7;
            font-size: $rem*44;
            font-weight: 900;
            text-align: center;
        }
        .btn {
            width: $rem*223;
            height: $rem*137;
            margin: $rem*40 auto 0;
            padding-top: $rem*45;
            background-image: url(#{$imgPath}ready_bg.png);
            @extend .bg__full;
            color: #6f3400;
            font-size: $rem*46;
            font-weight: 900;
            line-height: 1;
            text-align: center;
            transform: translateY(-$rem*400) scale(0.1, 0.1);

            &.jumpout {
                opacity: 0;
                animation: jumpout 1s 1.2s ease forwards;
            }

            &.bounce {
                animation: bounce 2s ease infinite;
            }

        }
        .monkey {
            width: $rem*416;
            height: $rem*318;
            margin: 0 auto $rem*20;
            background-image: url(#{$imgPath}monkey.png);
            @extend .bg__full;
        }
    }
}

@keyframes openPacket {
    0% {
        transform: rotateX(-180deg);
    }
    100% {
        transform: rotateX(0deg);
    }
}

@keyframes jumpout {
    0% {
        opacity: 1;
        transform: translateY(-$rem*400) scale(0.1, 0.1);
    }
    100% {
        opacity: 1;
        transform: scale(1, 1);
    }
}

@keyframes bounce {
    0% {
        transform: translateY(0)
    }
    50% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(10%);
    }
}

.packet-rain {
    display: none;
    width: 100%;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    .monkey-money {
        width: $rem*385;
        height: $rem*277;
        background-image: url(#{$imgPath}monkey_money.gif);
        @extend .bg__full;
    }
    .packet {
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        will-change: transform;
        transition: transform 2.5s ease-in-out;
        width: $rem*180;
        height: $rem*180;
        background-size: cover;
        background-position: left center;
        background-repeat: no-repeat;
        font-size: 0;
        z-index: 3;
        &.bg-right {
            background-position: right center;
        }
        &.away {
            transition: transform .7s cubic-bezier(0.46, 0.03, 0.52, 0.96);
            transform: translate(20%, -30%);
            background: rgba(0, 0, 0, 0);
            font-size: $rem*24;
            color: #fff;
        }
    }
    .red-packet {
        background-image:url(#{$imgPath}red_packet.png);
    }
    .dollar-pocket {
        background-image: url(#{$imgPath}dollar_packet.png);
    }
    .pound-packet {
        background-image: url(#{$imgPath}pound_packet.png);
    }
    .euro-packet {
        background-image: url(#{$imgPath}euro_packet.png);
    }
    .korean-packet {
        background-image: url(#{$imgPath}korean_packet.png);
    }
    .yen-packet {
        background-image: url(#{$imgPath}yen_packet.png);
    }
}

.ios {
    .packet-rain {
        top: $rem*150;
    }
}

//红包雨结束弹框
.packet-dialog{
    //position:fixed;
    left: 0;
    right: 0;
    top:0;
    bottom:0;
    background:rgba(0,0,0,.6);
    //display: none;
    &.show{
        display: block;
        .packet-dialog-box{
            transform: translate(-50%,-50%) scale(1);
        }
    }
    &-box{
        border:$rem*6 solid #e13154;
        border-radius: $rem*8;
        background: #fff;
        position:absolute;
        left:50%;
        top:50%;
        transform: translate(-50%,-50%) scale(0);
        padding:$rem*65 $rem*20;
        min-width: $rem*520;
        transition: transform 1.3s ease-in-out;
        z-index:8;
    }
    &-hd{
        position:relative;
        .close-btn{
            position:absolute;
            height:$rem*50;
            width:$rem*50;
            background:#e13154;
            color: #fff;
            line-height: $rem*50;
            text-align: center;
            font-size:$rem*28;
            top:$rem*-85;
            right:$rem*-40;
            border-radius:50%;
        }
    }
    &-bd{
        h3{
            font-size:$rem*28;
            font-weight: bold;
            color:#e22c50;
        }
        h4 {
            font-size:$rem*24;
            font-weight: bold;
            color:#e22c50;
        }
        text-align: center;
        .btn{
            border-radius:$rem*8;
            padding:$rem*10 $rem*32;
            min-width: $rem*150;
            margin-top: $rem*40;
            border:$rem*3 solid #e13154;
            background:#fff;
            color:#e13154;
            font-size:$rem*30;
        }
        .comfirm-btn{
            margin-right:$rem*40;
            background:#e13154;
            color:#fff;
        }
    }
}
